<template>
  <div class="app">
    <h3>我是APP组件(祖), {{name}}---{{perice}}</h3>
    <Child></Child>
  </div>
</template>

<script>
import { reactive,toRefs,provide } from 'vue';
import Child from './components/Child'
export default {
  name: 'App',
  components: {
    Child
  },
  setup() {
    let car = reactive({
      name: '奔驰',
      perice: '40W'
    })

    provide('car', car) // 给自己的后代组件传递数据

    return {
      ...toRefs(car)
    }
  }
};
</script>

<style scoped>
  .app {
    background-color:  gray;
    padding: 10px;
  }
</style>